<template>
  <div class="table-visit">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button icon="el-icon-view" type="primary" @click="handleAdd(0,'')" >
          来访探视登记
        </el-button>
        <el-button type="warning" @click="stamp(0)" >
          打印
        </el-button>

      </vab-query-form-left-panel>
      <vab-query-form-right-panel>


        <el-date-picker
          align="right"
          style="width: 250px;margin-right: 5px"
          size="mini"
          @change="changetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="value1"
          type="datetimerange"
          :unlink-panels="true"
          range-separator="至"
          start-placeholder="探视开始日期"
          end-placeholder="探视结束日期">
        </el-date-picker>
            <el-select
              :clearable="true"
              v-model="queryForm.checkInMark"
              filterable
              remote
              size="mini"
              reserve-keyword
              style="width: 20%;margin-right: 5px;"
              placeholder="请输入老人姓名/证件号"
              :remote-method="remoteMethod"
              :loading="loading">
              <el-option
                v-for="item in options"
                :key="item.checkInMark"
                :label="item.elderlyName"
                :value="item.checkInMark">
                <span style="float: left;width: 24%">姓名：{{ item.elderlyName }}</span>
                <span style="width: 33%;color: #8492a6;font-size: 13px" >入住房间：{{ item.checkInBed}}</span>
                <span style="width: 40%;float: right; color: #8492a6; font-size: 13px">证件号：{{ item.cardNo }}</span>
              </el-option>

            </el-select>
        <el-select v-model="queryForm.leaveStatus" placeholder="请选择离院状态" size="mini" style="width: 20%;">
          <el-option
            v-for="item in option"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

          <el-button type="primary" style="margin-left: 20px" @click="search(1,'')"  size="mini">条件查询</el-button>


      </vab-query-form-right-panel>
    </vab-query-form>

    <el-dialog
      title="来访探视登记"
      @close='closeDialog'
      :visible.sync="dialogFormVisible"
      width="400px"
      destroy-on-close

    >

      <el-form ref="form"   :rules="rules"  :model="form" >
        <el-form-item label="入住人姓名" prop="checkInMark">
          <el-select
            v-model="form.checkInMark"
            filterable
            remote
            :clearable="true"
            reserve-keyword
            style="width: 100%;"

            placeholder="请输入老人姓名/证件号/助记码"
            :remote-method="remoteMethod"
            :loading="loading">
            <el-option
              v-for="item in options"
              :key="item.checkInMark"
              :label="item.elderlyName"
              :value="item.checkInMark">
              <span style="float: left;width: 24%">姓名：{{ item.elderlyName }}</span>
              <span style="width: 33%;color: #8492a6;font-size: 13px" >入住房间：{{ item.checkInBed}}</span>
              <span style="width: 37%;float: right; color: #8492a6; font-size: 13px">证件号：{{ item.cardNo }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="探视人" prop="visitor" >
          <el-input v-model="form.visitor" ></el-input>

        </el-form-item>
        <el-form-item label="与老人关系" required>
          <el-select v-model=" form.relationship" style="width: 100%" placeholder="请选择" >
            <el-option
              v-for="item in relationships"
              :key="item.dcNo"
              :label="item.name"
              :value="item.dcNo">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="门卫签名" prop="doormanSign">
          <el-input v-model="form.doormanSign"></el-input>

        </el-form-item>
        <el-form-item label="探视时间" prop="visitTime">

          <el-date-picker
            v-model="form.visitTime"
            type="datetime"
            style="width: 100%"

            placeholder="探视时间">
          </el-date-picker>

        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false" >取 消</el-button>
        <el-button type="primary" @click="savevisit">保 存</el-button>

      </div>
    </el-dialog>


    <el-table
      ref="multipleTable"
      :data="tableData"
      v-loading="listLoading"

      tooltip-effect="dark"
      style="width: 100%"

    >
      <el-table-column
        prop="visitCode"
        label="来访编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="elderlyName"
        label="探视老人"
        width="180">
      </el-table-column>
      <el-table-column
        prop="visitor"
        label="探视人"
        width="180">
      </el-table-column>
      <el-table-column
        label="探视时间"
        width="180">

        <template slot-scope="scope">
          {{scope.row.visitTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
        </template>
      </el-table-column>
      <el-table-column
        prop="relationshipName"
        label="与老人关系"
        width="180">
      </el-table-column>

      <el-table-column
        label="离院时间"
        width="180">
        <template slot-scope="scope" v-if="scope.row.leaveTime">
          {{scope.row.leaveTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
        </template>
      </el-table-column>

      <el-table-column
        prop="doormanSign"
        label="门卫签名"
        width="180">
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="操作"
        width="200px"

      >
        <template slot-scope="scope">

          <el-button type="text" @click="Leaving(scope.row)" v-if="!scope.row.leaveTime">离院 <i class="el-icon-download"></i></el-button>


        </template>
      </el-table-column>
    </el-table>
    <div ref="print" class="mytables" id="printContent">

      <h3 style="text-align: center;">来访探视登记表</h3>
      <table style="width: 100%" class="mytable" cellpadding="0" cellspacing="1">
        <thead>
         <tr>
             
              <td rowspan="2" class="ttitle">日期</td>
          <td rowspan="2" class="ttitle">探视时间</td>
              <td colspan="2" style="width: 30%">老人信息</td>
              <td rowspan="2" class="ttitle">探视人姓名</td>
              <td rowspan="2" class="ttitle">与老人关系</td>
           <td rowspan="2" class="ttitle">离院时间</td>
           <td rowspan="2" class="ttitle">门卫签字</td>
            </tr>
         <tr>
              <td class="ttitle">姓名</td>
              <td class="ttitle">房间</td>
            </tr>
        </thead>
        <tbody>
          <tr v-for="item in list">
              <td style="font-size: 14px">{{new Date()| parseTime('{y}-{m}-{d}')}}</td>
              <td style="font-size: 14px"> {{item.visitTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</td>
              <td style="font-size: 14px">{{item.elderlyName}}</td>
              <td style="font-size: 14px">{{item.checkInBed.buildingNumber}}楼{{item.checkInBed.unit}}单元{{item.checkInBed.floor}}层{{item.checkInBed.roomNumber}}房{{item.checkInBed.bedNumber}}床</td>
              <td style="font-size: 14px">{{item.visitor}}</td>
              <td style="font-size: 14px">{{item.relationshipName}}</td>
             <td style="font-size: 14px" ><span v-if="item.leaveTime">{{item.leaveTime |parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span></td>
              <td style="font-size: 14px">{{item.doormanSign}}</td>
           
            </tr>

        </tbody>
      </table>
    </div>

    <el-pagination
      :background="background"
      :current-page="queryForm.currPageNo"
      :total="total"
      :page-size="queryForm.limit"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
  </div>
</template>

<script>
    import { parseTime} from "@/utils/index";
    import {savevisit,search,leave,searchelderlycondition,visitingrecord} from "../../api/visit";
    import Print from '@/utils/print'
    import Vue from 'vue'
    Vue.use(Print)
    export default {
        name: "Visit",
        filters:{
            parseTime:parseTime
        },
        data(){
            return{

                option:[
                    {value:'0',
                        label:"全部"

                    },
                    {value:'2',
                        label:"未离院"

                    },
                    {value:'1',
                        label:"已离院"

                    },

                ],
                total:0,
                loading:false,

                options:[],
                background:true,
                dictionary:"",
                tableData:[],
                value1:[new Date(),new Date()],
                listLoading:false,
                list:[],
                relationships:[],
                rules: {
                    checkInMark: [

                        {required: true, message: '请输入老人姓名', trigger: 'blur'}

                    ],
                    doormanSign: [

                        {required: true, message: '门卫签名', trigger: 'blur'}

                    ],
                    relationship: [

                        {required: true, message: '与老人关系', trigger: 'change'}

                    ],
                    visitTime: [

                        {required: true, message: '探视时间', trigger: 'blur'}

                    ],
                    visitor: [

                        {required: true, message: '探视人', trigger: 'blur'}

                    ],
                },
                form:{

                    checkInMark:"",//入住编号
                    doormanSign:"",//门卫签名
                    relationship:3,//与老人关系
                    visitTime:"",//探视时间
                    visitor:"",//探视人


                },
                queryForm:{
                    leaveStatus:"2",
                    limit:8,
                    currPageNo:1,
                    institutionNumber:"",
                    visitTimeStart:"",
                    visitTimeEnd:"",
                    checkInMark:"",


                },
                visitForm:{
                    timeStart:"",
                    timeEnd:"",
                    institutionNumber:"",
                },
                dialogFormVisible:false,
            }
        },
        mounted(){
            this.dictionary=JSON.parse(localStorage.getItem("dictionary"))
            this.queryForm.institutionNumber=JSON.parse(localStorage.getItem("institutionNumber"))
            this.visitForm.institutionNumber=JSON.parse(localStorage.getItem("institutionNumber"))

            for(var i=0;i<this.dictionary.length;i++){
             if(this.dictionary[i].mark=="relationship"){
                    this.relationships=(this.dictionary[i].childs)
                }
            }
             this.search()
        },
        methods:{
            remoteMethod(query) {
                console.log(query)
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                     let elderlycondition=query
                        searchelderlycondition({elderlycondition}).then(res =>{
                            console.log(res)
                          this.options=res.data


                        })
                        // this.options = this.list.filter(item => {
                        //     console.log(item)
                        //     return item.elderlyName.toLowerCase()
                        //         .indexOf(query.toLowerCase()) > -1;
                        // });
                    }, 200);
                } else {
                    this.options = [];
                }
            },
            handleAdd(){
                this.dialogFormVisible=true
                this.form={
                    checkInMark:"",//入住编号
                    doormanSign:"",//门卫签名
                    relationship:3,//与老人关系
                    visitTime:(new Date()),//探视时间
                    visitor:"",//探视人
                }
            },
            closeDialog(){

            },
            stamp(size){
                if(this.list){
                    this.$print(this.$refs.print, { size })
                }else {
                    this.$baseMessage("当前时间无数据可打印",'warning');
                }
            },
            savevisit(){

                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        savevisit(this.form).then(res =>{
                            console.log(res)
                            this.$baseMessage("登记成功");
                            this.queryForm.currPageNo=1
                            this.search()
                            this.dialogFormVisible=false

                        })
                    } else {

                        return false;
                    }
                });

            },
            changetime(value){
                console.log(value)
                if(this.value1){
                    this.queryForm.visitTimeStart=value[0]
                    this.queryForm.visitTimeEnd=value[1]
                }else {
                    this.queryForm.visitTimeStart=new Date()
                    this.queryForm.visitTimeEnd=new Date()
                }

            },
            search(id){

                    if(id){

                        this.queryForm.currPageNo=1


                    }else {
                        this.queryForm.visitTimeStart=new Date()
                        this.queryForm.visitTimeEnd=new Date()
                        this.value1=[new Date(),new Date()]
                        this.checkInMark=""

                    }
                this.listLoading=true
                search(this.queryForm).then(res =>{
                    console.log(res)
                    this.tableData=res.data.data
                    this.total=res.data.total


                })

                setTimeout(() => {
                    this.listLoading = false;
                }, 500);
                this.visitForm.timeStart=this.queryForm.visitTimeStart
                this.visitForm.timeEnd=this.queryForm.visitTimeEnd
                visitingrecord(this.visitForm).then(res =>{
                    console.log(res)
                    this.list=res.data



                })

                console.log(this.queryForm)
            },
            handleSizeChange(val) {
                this.queryForm.limit = val;
                this.search();
            },
            handleCurrentChange(val) {

                this.queryForm.currPageNo = val;
                this.search();
            },
            Leaving(row){
                   console.log(row)
                this.$baseConfirm("你确定要离院", null, async () => {
                    let visitCode=row.visitCode
                    leave({visitCode}).then(res => {
                        this.$baseMessage("操作成功");
                        this.queryForm.currPageNo=1
                        this.search()
                    })

                })


            }
        },
    }
</script>

<style scoped>
  @media only screen and (min-width: 1920px){
    .table-visit>>> .el-col-xl-10 {
      width: 50.666667% !important;
    }
  }

  @media only screen and (min-width: 1920px){
    .table-visit>>> .el-col-xl-14 {
      width: 46.666667% !important;
    }
  }

  @media only screen and (min-width: 1200px){
    .table-visit>>> .el-col-xl-10 {
      width: 50.666667% !important;
    }
  }

  @media only screen and (min-width: 1200px){
    .table-visit>>> .el-col-xl-14 {
      width: 46.666667% !important;
    }
  }

  .mytables{
    display: none ;
    padding-top: 10px;

  }
  .mytable
  {

    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }
  .mytable td, table th
  {
    border: 1px solid rgba(59,65,81,.3);
    height: 40px;
  }
  .mytable .ttitle
  {
    background-color: #F5FAFA;
    width: 10%;
  }
  .mytable tr:nth-child(odd)
  {
    background: #fff;
  }
  .mytable .datalist{
    width: 30%;

  }

</style>
